<template>
  <div class="pagestyle">
    <div
      class="liuchengtu"
      :style="{ background: isDark ? 'rgba(255, 255, 255, 0.8)' : '' }"
    >
      <div class="fbc">
        <span>管路设计 </span>
        <span
          style="width: 83px"
          :class="state.addGuanluModal ? 'listInfoBtn active' : 'listInfoBtn'"
          @click="addBtn"
        >
          <svg-icon
            :class="state.addGuanluModal ? 'active' : ''"
            class-name="search-icon"
            icon-class="xinzeng"
          />
          新增
        </span>
      </div>
      <div class="container">
        <!-- 动态创建多个树状图容器 -->
        <div
          v-for="(treeData, index) in state.treeDataList"
          :key="index"
          :ref="
            (el) => {
              if (el) state.treeRefs[index] = el;
            }
          "
          class="tree-chart-item"
        ></div>
      </div>
    </div>

    <!-- 新增管路弹框 -->
    <teleport to="body">
      <vxe-modal
        esc-closable
        destroy-on-close
        :lock-view="false"
        :width="660"
        :height="auto"
        v-model="state.addGuanluModal"
        resize
        :mask="true"
        showFooter
      >
        <template #title>
          <div class="w100 h100 fsc mask_title">
            {{ state.modalGuanluTitle }}
          </div>
        </template>
        <template #default>
          <div class="form_box">
            <el-form
              ref="formGuanluRef"
              :model="state.formGuanluData"
              :rules="state.formGuanluRules"
              label-position="top"
            >
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="管路名称" prop="pipeName">
                    <el-input
                      v-model="state.formGuanluData.pipeName"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="管路类型" prop="pipeTypeId">
                    <el-select
                      @change="guanluChange"
                      v-model="state.formGuanluData.pipeTypeId"
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option label="主管" :value="1"></el-option>
                      <el-option label="干管" :value="2"></el-option>
                      <el-option label="支管" :value="3"></el-option>
                      <el-option label="汇流管" :value="4"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="state.formGuanluData.pipeTypeId != 1">
                  <el-form-item label="汇入管路" prop="huiruId">
                    <el-cascader
                      @change="cascaderChange"
                      v-model="state.formGuanluData.huiruId"
                      :options="state.huiruSelectData"
                      :props="state.casderProps"
                      style="width: 100%"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="抽采达标量(m³)"
                    prop="drainageStandardVolume"
                  >
                    <el-input
                      oninput="value=value.replace(/[^\d.]/g,'').replace(/^\./g,'').replace(/\.{2,}/g,'.').replace('.','$#$').replace(/\./g,'').replace('$#$','.')"
                      v-model="state.formGuanluData.drainageStandardVolume"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="管道类型" prop="pipePressureTypeId">
                    <el-select
                      v-model="state.formGuanluData.pipePressureTypeId"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="(item, index) in state.guandaoTypeSelectData"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="大气压(kpa)" prop="atm">
                    <el-input
                      oninput="value=value.replace(/[^\d.]/g,'').replace(/^\./g,'').replace(/\.{2,}/g,'.').replace('.','$#$').replace(/\./g,'').replace('$#$','.')"
                      v-model="state.formGuanluData.atm"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="安装位置" prop="installPlace">
                    <el-input
                      v-model="state.formGuanluData.installPlace"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="长度(m)" prop="length">
                    <el-input
                      oninput="value=value.replace(/[^\d.]/g,'').replace(/^\./g,'').replace(/\.{2,}/g,'.').replace('.','$#$').replace(/\./g,'').replace('$#$','.')"
                      v-model="state.formGuanluData.length"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="关联门阀" prop="valveId">
                    <el-select
                      v-model="state.formGuanluData.valveId"
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="(item, index) in state.guanlianSelectData"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="阀门安装位置：距离安装位置(m)" prop="location">
                    <el-input
                      oninput="value=value.replace(/[^\d.]/g,'').replace(/^\./g,'').replace(/\.{2,}/g,'.').replace('.','$#$').replace(/\./g,'').replace('$#$','.')"
                      v-model="state.formGuanluData.location"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <span class="fbc">
                    <span style="font-weight: 700; font-size: 16px"
                      >关联监测点</span
                    >
                    <span
                      style="width: 83px"
                      :class="
                        state.addJanceModal
                          ? 'listInfoBtn active'
                          : 'listInfoBtn'
                      "
                      @click="addJanceBtn"
                    >
                      <svg-icon
                        :class="state.addJanceModal ? 'active' : ''"
                        class-name="search-icon"
                        icon-class="xinzeng"
                      />
                      新增
                    </span>
                  </span>
                </el-col>
                <el-col :span="24" style="height: 230px; overflow-y: auto">
                  <el-row
                    :gutter="20"
                    v-for="(item, index) in state.formGuanluData.points"
                    :key="index"
                  >
                    <el-col :span="11">
                      <el-form-item label="监测点" prop="pointId">
                        <el-select
                          v-model="item.pointId"
                          placeholder="请选择"
                          style="width: 100%"
                        >
                          <el-option
                            v-for="(item, index) in state.jiancedianSelectData"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item label="管路位置：距离安装位置(m)" prop="location">
                        <el-input
                      oninput="value=value.replace(/[^\d.]/g,'').replace(/^\./g,'').replace(/\.{2,}/g,'.').replace('.','$#$').replace(/\./g,'').replace('$#$','.')"
                          v-model="item.location"
                          placeholder="请输入"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col
                      v-if="state.formGuanluData.points.length > 1"
                      :span="2"
                      style="padding-top: 35px"
                    >
                      <Delete
                        @click="delJanceBtn(index)"
                        style="width: 1.5em; height: 1.5em; color: red"
                      />
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </template>
        <template #footer>
          <el-button @click="cancelGuanluModal">取消</el-button>
          <el-button type="primary" @click="submitGuanluForm"> 确定 </el-button>
        </template>
      </vxe-modal>
    </teleport>

    <!-- 关联钻孔弹框 -->
    <teleport to="body">
      <vxe-modal
        esc-closable
        destroy-on-close
        :lock-view="false"
        :width="990"
        :height="auto"
        v-model="state.addGlzkModal"
        resize
        :mask="true"
        showFooter
      >
        <template #title>
          <div class="w100 h100 fsc mask_title">
            {{ state.modalGlzkTitle }}
          </div>
        </template>
        <template #default>
          <div class="form_box">
            <div class="topTitle">
              <span
                >正在关联
                <span class="ble">{{ state.guanluName }}</span>
                钻孔
              </span>
            </div>
            <el-form
              ref="formZuanchangRef"
              :model="state.formGlzkData"
              :rules="state.formGlzkRules"
              label-position="top"
            >
              <el-row :gutter="20">
                <el-col :span="8" v-if="state.modalGlzkTitle == '关联钻孔'">
                  <el-form-item label="钻场" prop="drillSiteId">
                    <el-select
                      @change="zcSelectChange"
                      v-model="state.formGlzkData.drillSiteId"
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="(item, index) in state.zcSelectData"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="state.modalGlzkTitle == '关联钻孔'">
                  <el-form-item label="钻孔" prop="drillId">
                    <el-select
                      @change="zkSelctChange"
                      v-model="state.formGlzkData.drillId"
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="(item, index) in state.zkSelectData"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="state.modalGlzkTitle == '关联钻孔'">
                  <el-form-item label="已选钻孔" prop="yxzkName">
                    <el-input
                      v-model="state.formGlzkData.yxzkName"
                      placeholder=""
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="监测点" prop="pointIds">
                    <el-select
                      v-model="state.formGlzkData.pointIds"
                      multiple
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="(item, index) in state.jiancedianSelectData"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="抽采达标量(m³)"
                    prop="drillStandardAmount"
                  >
                    <el-input
                      v-model="state.formGlzkData.drillStandardAmount"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="关联门阀" prop="valveId">
                    <el-select
                      v-model="state.formGlzkData.valveId"
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="(item, index) in state.guanlianSelectData"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <span>钻场：</span>
                  <span>{{ state.zkObj.drillSiteName }}</span>
                </el-col>
                <el-col :span="4">
                  <span>钻孔编号：</span>
                  <span>{{ state.zkObj.drillCode }}</span>
                </el-col>
                <el-col :span="4">
                  <span>抽采方式：</span>
                  <span>{{ state.zkObj.drainageMethodName }}</span>
                </el-col>
              </el-row>
              <div class="tables">
                <div class="glzkall">
                  <div class="glzkallTitie fbc t3">
                    <span class="w80">参数</span>
                    <span class="w80">钻孔位置</span>
                    <span class="w80">开孔高度(m)</span>
                    <span class="w80">钻孔方位角(°)</span>
                    <span class="w80">钻孔倾角(°)</span>
                    <span class="w80">钻孔间距(m)</span>
                    <span class="w80">钻孔孔径(mm)</span>
                    <span class="w80">钻孔深度(m)</span>
                  </div>
                  <div class="glzkallTitie fbc">
                    <span class="w80">设计参数</span>
                    <span class="w80">{{
                      state.zkObj.designDrillLocation
                    }}</span>
                    <span class="w80">{{ state.zkObj.designDrillHeight }}</span>
                    <span class="w80">{{
                      state.zkObj.designDrillAzimuthAngle
                    }}</span>
                    <span class="w80">{{
                      state.zkObj.designDrillElevationAngle
                    }}</span>
                    <span class="w80">{{
                      state.zkObj.designDrillInterval
                    }}</span>
                    <span class="w80">{{
                      state.zkObj.designDrillAperture
                    }}</span>
                    <span class="w80">{{ state.zkObj.designDrillDepth }}</span>
                  </div>
                  <div class="glzkallTitie fbc">
                    <span class="w80">实际参数</span>
                    <span class="w80">{{ state.zkObj.realDrillLocation }}</span>
                    <span class="w80">{{ state.zkObj.realDrillHeight }}</span>
                    <span class="w80">{{
                      state.zkObj.realDrillAzimuthAngle
                    }}</span>
                    <span class="w80">{{
                      state.zkObj.realDrillElevationAngle
                    }}</span>
                    <span class="w80">{{ state.zkObj.realDrillInterval }}</span>
                    <span class="w80">{{ state.zkObj.realDrillAperture }}</span>
                    <span class="w80">{{ state.zkObj.realDrillDepth }}</span>
                  </div>
                </div>
              </div>
            </el-form>
          </div>
        </template>
        <template #footer>
          <el-button @click="cancelGlzkModal">取消</el-button>
          <el-button type="primary" @click="submitGlzkForm"> 确定 </el-button>
        </template>
      </vxe-modal>
    </teleport>

    <!-- 管路详情弹框-汇流管 -->
    <teleport to="body">
      <vxe-modal
        esc-closable
        destroy-on-close
        :lock-view="false"
        :width="1200"
        :height="auto"
        v-model="state.guanluDetailsModal"
        resize
        :mask="true"
        showFooter
      >
        <template #title>
          <div class="w100 h100 fsc mask_title">管路详情</div>
        </template>
        <template #default>
          <div class="form_box">
            <div class="zctp fbc">
              <div class="zcptall">
                <div>
                  <div class="t1">管路名称</div>
                  <div class="t2">{{ state.glDetailObj.pipeName }}</div>
                </div>
                <div>
                  <div class="t1">管路类型</div>
                  <div class="t2">{{ state.glDetailObj.pipeTypeName }}</div>
                </div>
                <div>
                  <div class="t1">汇入管路</div>
                  <div class="t2" v-if="state.glDetailObj?.nameDir?.length > 0">
                    {{
                      state.glDetailObj.nameDir[
                        state.glDetailObj?.nameDir?.length - 1
                      ]
                    }}
                  </div>
                </div>
                <div>
                  <div class="t1">巷道位置</div>
                  <div class="t2">
                    {{ state.glDetailObj.installPlace }}
                  </div>
                </div>
                <div>
                  <div class="t1">抽采达标量(m³)</div>
                  <div class="t2">
                    {{ state.glDetailObj.drainageStandardVolume }}
                  </div>
                </div>
                <div>
                  <div class="t1">历史抽采量(m³)</div>
                  <div class="t2">
                    {{ state.glDetailObj.drainageHistoryVolume }}
                  </div>
                </div>
                <div>
                  <div class="t1">开始抽采日期</div>
                  <div class="t2">
                    {{ state.glDetailObj.drainageStartTime }}
                  </div>
                </div>
                <div>
                  <div class="t1">预计抽采结束</div>
                  <div class="t2">
                    {{ state.glDetailObj.drainageEndTime }}
                  </div>
                </div>
                <div>
                  <div class="t1">关联传感器</div>
                  <div class="t2">
                    <span
                      v-for="(item, index) in state.glDetailObj.points"
                      :key="index"
                    >
                      {{ item.pointId }}&nbsp;{{ item.pointName }}
                      <span
                        v-if="state.glDetailObj?.points?.length !== index + 1"
                        >,</span
                      >
                    </span>
                  </div>
                </div>
                <div>
                  <div class="t1">关联门阀</div>
                  <div class="t2">{{ state.glDetailObj.valveName }}</div>
                </div>
                <div>
                  <div class="t1">大气压(kPa)</div>
                  <div class="t2">{{ state.glDetailObj.atm }}</div>
                </div>
              </div>
            </div>
            <div class="zcbt">
              <div class="searchs">
                <el-form :model="state.glSearchData" class="forms">
                  <el-row :gutter="20">
                    <el-col :span="6">
                      <el-form-item label="钻孔编号">
                        <el-input
                          v-model="state.glSearchData.drillCode"
                          placeholder="请输入"
                          size="small"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="抽采时间">
                        <el-date-picker
                          v-model="state.glSearchData.time"
                          type="daterange"
                          range-separator="-"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          size="small"
                          :value-format="'YYYY-MM-DD'"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label=" ">
                        <el-button
                          @click="glDetailqueryFn"
                          size="small"
                          type="primary"
                          >查询</el-button
                        >
                        <el-button @click="glDetailresetFn" size="small"
                          >重置</el-button
                        >
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
              <div class="liebiao">
                <div class="liebiaoTop fbc">
                  <span style="font-weight: 700">钻孔列表</span>
                  <span>
                    <el-button
                      @click="guanlianZuankongFn"
                      type="primary"
                      size="small"
                      >关联钻孔</el-button
                    >
                  </span>
                </div>
                <div class="liebiaoBottom">
                  <vxe-table
                    height="340"
                    :data="state.glxqTableData"
                    border="inner"
                  >
                    <vxe-column type="checkbox" :width="55"></vxe-column>
                    <vxe-column
                      type="seq"
                      :width="55"
                      title="序号"
                    ></vxe-column>
                    <vxe-column
                      v-for="(item, index) in state.glxqTableheads"
                      :field="item.field"
                      :title="item.title"
                      :params="{ name: item.name }"
                      :width="item.width ? item.width : ''"
                      :key="index"
                    >
                      <!-- 是否终孔 -->
                      <template
                        #default="{ row }"
                        v-if="item.field === 'finalDrill'"
                      >
                        <div>
                          <span>{{
                            row[item.field] === true ? "是" : "否"
                          }}</span>
                        </div>
                      </template>
                    </vxe-column>
                    <vxe-column title="操作">
                      <template #default="{ row }">
                        <el-button type="primary" link size="small"
                          >抽采曲线</el-button
                        >
                      </template>
                    </vxe-column>
                  </vxe-table>
                  <div v-if="state.glxqpageconfig.total > 0" class="w100">
                    <el-pagination
                      class="globalFontSize"
                      :class="{ pages: settingsStore.isDark }"
                      v-model:current-page="state.glxqpageconfig.currentPage"
                      v-model:page-size="state.glxqpageconfig.pageSize"
                      :page-sizes="[10, 20, 30, 40]"
                      background
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="state.glxqpageconfig.total"
                      @size-change="glxqSizePage"
                      @current-change="glxqCurrentPage"
                      style="position: absolute; bottom: 16px; right: 16px"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template #footer>
          <el-button @click="cancelGlDetailModal">取消</el-button>
          <el-button type="primary" @click="submitGlDetailForm">
            确定
          </el-button>
        </template>
      </vxe-modal>
    </teleport>

    <!-- 管路详情弹框-非汇流管 -->
    <teleport to="body">
      <vxe-modal
        esc-closable
        destroy-on-close
        :lock-view="false"
        :width="1200"
        :height="auto"
        v-model="state.guanluDetailsModalFei"
        resize
        :mask="true"
        showFooter
      >
        <template #title>
          <div class="w100 h100 fsc mask_title">管路详情</div>
        </template>
        <template #default>
          <div class="form_box">
            <div class="zctp fbc">
              <div class="zcptall">
                <div>
                  <div class="t1">管路名称</div>
                  <div class="t2">{{ state.glDetailObjFei.pipeName }}</div>
                </div>
                <div>
                  <div class="t1">管路类型</div>
                  <div class="t2">{{ state.glDetailObjFei.pipeTypeName }}</div>
                </div>
                <div>
                  <div class="t1">汇入管路</div>
                  <div
                    class="t2"
                    v-if="state.glDetailObjFei?.nameDir?.length > 0"
                  >
                    {{
                      state.glDetailObjFei.nameDir[
                        state.glDetailObjFei?.nameDir?.length - 1
                      ]
                    }}
                  </div>
                </div>
                <div>
                  <div class="t1">巷道位置</div>
                  <div class="t2">
                    {{ state.glDetailObjFei.installPlace }}
                  </div>
                </div>
                <div>
                  <div class="t1">抽采达标量(m³)</div>
                  <div class="t2">
                    {{ state.glDetailObjFei.drainageStandardVolume }}
                  </div>
                </div>
                <div>
                  <div class="t1">历史抽采量(m³)</div>
                  <div class="t2">
                    {{ state.glDetailObjFei.drainageHistoryVolume }}
                  </div>
                </div>
                <div>
                  <div class="t1">开始抽采日期</div>
                  <div class="t2">
                    {{ state.glDetailObjFei.drainageStartTime }}
                  </div>
                </div>
                <div>
                  <div class="t1">预计抽采结束</div>
                  <div class="t2">
                    {{ state.glDetailObjFei.drainageEndTime }}
                  </div>
                </div>
                <div>
                  <div class="t1">关联传感器</div>
                  <div class="t2">
                    <span
                      v-for="(item, index) in state.glDetailObjFei.points"
                      :key="index"
                    >
                      {{ item.pointId }}&nbsp;{{ item.pointName }}
                      <span
                        v-if="
                          state.glDetailObjFei?.points?.length !== index + 1
                        "
                        >,</span
                      >
                    </span>
                  </div>
                </div>
                <div>
                  <div class="t1">关联门阀</div>
                  <div class="t2">{{ state.glDetailObjFei.valveName }}</div>
                </div>
              </div>
            </div>
            <div class="zcbt">
              <div class="searchs">
                <el-form :model="state.glSearchDataFei" class="forms">
                  <el-row :gutter="20">
                    <el-col :span="6">
                      <el-form-item label="管路名称">
                        <el-input
                          v-model="state.glSearchDataFei.pipeName"
                          placeholder="请输入"
                          size="small"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="抽采时间">
                        <el-date-picker
                          v-model="state.glSearchDataFei.time"
                          type="daterange"
                          range-separator="-"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          size="small"
                          :value-format="'YYYY-MM-DD'"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label=" ">
                        <el-button
                          @click="glDetailqueryFeiFn"
                          size="small"
                          type="primary"
                          >查询</el-button
                        >
                        <el-button @click="glDetailresetFeiFn" size="small"
                          >重置</el-button
                        >
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
              <div class="liebiao">
                <div class="liebiaoTop fbc">
                  <span style="font-weight: 700">支路列表</span>
                  <span>
                    <el-button
                      @click="addBtn(state.addTypeId, state.addIdDir)"
                      type="primary"
                      size="small"
                      >新增管路</el-button
                    >
                  </span>
                </div>
                <div class="liebiaoBottom">
                  <vxe-table
                    height="340"
                    :data="state.glxqTableDataFei"
                    border="inner"
                  >
                    <vxe-column type="checkbox" :width="55"></vxe-column>
                    <vxe-column
                      type="seq"
                      :width="55"
                      title="序号"
                    ></vxe-column>
                    <vxe-column
                      v-for="(item, index) in state.glxqTableheadsFei"
                      :field="item.field"
                      :title="item.title"
                      :params="{ name: item.name }"
                      :width="item.width ? item.width : ''"
                      :key="index"
                    >
                    </vxe-column>
                    <vxe-column title="操作">
                      <template #default="{ row }">
                        <el-button type="primary" link size="small"
                          >抽采曲线</el-button
                        >
                      </template>
                    </vxe-column>
                  </vxe-table>
                  <div v-if="state.glxqpageconfigFei.total > 0" class="w100">
                    <el-pagination
                      class="globalFontSize"
                      :class="{ pages: settingsStore.isDark }"
                      v-model:current-page="state.glxqpageconfigFei.currentPage"
                      v-model:page-size="state.glxqpageconfigFei.pageSize"
                      :page-sizes="[10, 20, 30, 40]"
                      background
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="state.glxqpageconfigFei.total"
                      @size-change="glxqSizePageFei"
                      @current-change="glxqCurrentPageFei"
                      style="position: absolute; bottom: 16px; right: 16px"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template #footer>
          <el-button @click="cancelGlDetailModalFei">取消</el-button>
          <el-button type="primary" @click="submitGlDetailFormFei">
            确定
          </el-button>
        </template>
      </vxe-modal>
    </teleport>
  </div>
</template>

<script setup>
import {
  computed,
  reactive,
  ref,
  getCurrentInstance,
  nextTick,
  onMounted,
  onUnmounted,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { table_headers } from "@/components/commonCom/table_headersChoucai";
import axios from "@/utils/request";
import usePagesStore from "@/store/modules/pages";
import useUserStore from "@/store/modules/user";
import useSettingsStore from "@/store/modules/settings";
import * as echarts from "echarts";
import treeAdd from "@/assets/images/wasi/treeAdd.png";
import treeDel from "@/assets/images/wasi/treeDel.png";
import treeEdit from "@/assets/images/wasi/treeEdit.png";
import treeDetail from "@/assets/images/wasi/treeDetail.png";
import { Delete } from "@element-plus/icons-vue";

const userStore = useUserStore();
const settingsStore = useSettingsStore();
const isDark = computed(() => settingsStore.isDark);
const { proxy } = getCurrentInstance();
const store = usePagesStore();

let currentHoverNode = null; // 记录当前悬停的节点

let state = reactive({
  // 树状图相关状态
  treeDataList: [], // 存储多个树的数据
  treeRefs: [], // 存储多个树容器的引用
  treeCharts: [], // 存储多个echarts实例

  // 其他状态
  addTypeId: null,
  addIdDir: null,
  nodeIdFei: null,
  casderProps: {
    label: "name",
    value: "id",
    children: "children",
  },
  addGuanluModal: false,
  modalGuanluTitle: "新增管路",
  formGuanluData: {
    points: [{ location: "", pointId: "" }],
  },
  formGuanluRules: {
    pipeName: [
      { required: true, message: "请输入管路名称", trigger: "blur" },
      { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" },
    ],
      pipeTypeId: [
      { required: true, message: "请选择管路类型", trigger: "blur" },
    ],
    huiruId: [
      { required: true, message: "请选择汇入管路", trigger: "blur" },
    ],
    pipePressureTypeId: [
      { required: true, message: "请选择管道类型", trigger: "blur" },
    ],
  },
  gongzuomianSelectData: [],
  guanlianSelectData: [
    { label: "无", value: 0 },
    { label: "有", value: 1 },
  ],
  jiancedianSelectData: [],
  huiruSelectData: [],
  guandaoTypeSelectData: [],
  zcSelectData: [],
  zkSelectData: [],
  addJanceModal: false,
  zkObj: {},
  guandaoId: null,
  guanluName: "",
  addGlzkModal: false,
  modalGlzkTitle: "关联钻孔",
  formGlzkData: {},
  formGlzkRules: {},
  // 管路详情-汇流管
  guanluDetailsModal: false,
  glDetailData: {},
  glSearchData: {},
  glxqTableData: [],
  glDetailObj: {},
  glxqTableheads: computed(() => table_headers.DrainageDrill),
  glxqpageconfig: {
    currentPage: 1,
    pageSize: 10,
    total: 0,
  },
  // 管路详情-非汇流管
  guanluDetailsModalFei: false,
  glDetailDataFei: {},
  glSearchDataFei: {},
  glxqTableDataFei: [],
  glDetailObjFei: {},
  glxqTableheadsFei: computed(() => table_headers.DrainageBranchPipeline),
  glxqpageconfigFei: {
    currentPage: 1,
    pageSize: 10,
    total: 0,
  },
});

// 初始化多个树状图
function initCharts(treeDataArray) {
  // 清空之前的实例
  state.treeCharts.forEach((chart) => {
    if (chart) {
      chart.dispose();
    }
  });

  state.treeDataList = treeDataArray;
  state.treeRefs = [];
  state.treeCharts = [];

  // 等待DOM更新
  nextTick(() => {
    state.treeDataList.forEach((treeData, index) => {
      if (state.treeRefs[index]) {
        const chart = echarts.init(state.treeRefs[index]);
        state.treeCharts[index] = chart;
        setupTreeChart(chart, [treeData], index);
      }
    });
  });
}

// 设置单个树状图
function setupTreeChart(chart, data, chartIndex) {
  const levelColors = ["#4488FF", "#09BFB2", "#FF8D1A", "#CF5BE3", "#FF7657"];

  // 处理数据
  const processData = (nodes, depth = 0) => {
    return nodes.map((node) => {
      const color = levelColors[depth % levelColors.length];
      const newNode = {
        ...node,
        depth: depth,
        color: color,
        childrenNum: node.children ? node.children.length : 0,
        id: node.id || Math.random().toString(36).substr(2, 9),
        // 添加一个自定义属性来标识是否应该展开收缩
        expandable: false,
      };

      if (node.children && node.children.length > 0) {
        newNode.children = processData(node.children, depth + 1);
      }

      return newNode;
    });
  };

  const processedData = processData(data);

  // 基础样式配置
  const baseStyle = {
    fontSize: 14,
    fontWeight: 500,
    color: "#fff",
    width: 80,
    height: 30,
    lineHeight: 20,
    borderRadius: 4,
    borderWidth: 1,
    borderColor: "#ccc",
    align: "center",
  };

  const iconStyle = {
    width: 16,
    height: 16,
    align: "center",
    color: "transparent",
  };

  const richConfig = {
    c: {
      fontSize: 12,
      padding: [-5, 0, 0],
      color: "#fff",
      align: "center",
    },
    addIcon: {
      ...iconStyle,
      backgroundColor: {
        image: treeAdd,
      },
    },
    delIcon: {
      ...iconStyle,
      backgroundColor: {
        image: treeDel,
      },
    },
    editIcon: {
      ...iconStyle,
      backgroundColor: {
        image: treeEdit,
      },
    },
    detailIcon: {
      ...iconStyle,
      backgroundColor: {
        image: treeDetail,
      },
    },
    iconContainer: {
      fontSize: 12,
      height: 20,
      align: "center",
      padding: [15, 0, 0, 0],
    },
  };

  levelColors.forEach((color, index) => {
    richConfig[`level${index}`] = {
      ...baseStyle,
      backgroundColor: color,
      padding: [0, 0, 15, 0],
    };
  });

  let option = {
    series: [
      {
        type: "tree",
        initialTreeDepth: -1,
        data: processedData,
        roam: true,
        zoom: 0.9,
        top: "1%",
        left: "1%",
        bottom: "1%",
        right: "1%",
        symbolSize: 0,
        label: {
          position: "left",
          verticalAlign: "middle",
          align: "right",
          formatter: (params) => {
            const node = params.data;
            const showIcons = currentHoverNode === node.id;

            const level = node.depth % levelColors.length;
            const childrenNum = node.childrenNum >= 0 ? node.childrenNum : 0;
            let labelText = `{level${level}|${node.name}}\n{c|${
              "(支路：" + childrenNum + ")"
            }}`;

            if (showIcons) {
              if (node.typeId === 5) {
                labelText += `\n{iconContainer|}{delIcon|del }\t{editIcon|edit }`;
              } else {
                labelText += `\n{iconContainer|}{addIcon|add }\t{delIcon|del }\t{editIcon|edit }\t{detailIcon|detail }`;
              }
            }

            return labelText;
          },
          rich: richConfig,
          padding: [0, 0, 10, 0],
        },
        leaves: {
          label: {
            position: "right",
            verticalAlign: "middle",
            align: "left",
            formatter: (params) => {
              const node = params.data;
              const showIcons = currentHoverNode === node.id;

              const level = node.depth % levelColors.length;
              const childrenNum = node.childrenNum >= 0 ? node.childrenNum : 0;
              let labelText = `{level${level}|${node.name}}\n{c|${
                "(支路：" + childrenNum + ")"
              }}`;

              if (showIcons) {
                if (node.typeId === 5) {
                  labelText += `\n{iconContainer|}{delIcon|del }\t{editIcon|edit }`;
                } else {
                  labelText += `\n{iconContainer|}{addIcon|add }\t{delIcon|del }\t{editIcon|edit }\t{detailIcon|detail }`;
                }
              }
              return labelText;
            },
            rich: richConfig,
            padding: [0, 0, 10, 0],
          },
        },
        lineStyle: {
          curveness: 0,
          width: 2,
          color: "#ccc",
          type: "dotted",
        },
        edgeShape: "polyline",
        expandAndCollapse: false, // 禁用自动展开收缩
        animationDuration: 550,
        animationDurationUpdate: 750,
      },
    ],
  };

  chart.setOption(option);

  // 事件处理
  chart.off("click");
  chart.off("mouseover");
  chart.off("mouseout");

  chart.on("click", function (params) {
    console.log(`图表 ${chartIndex + 1}:`, params, "点击事件");

    if (params.componentType === "series" && params.data) {
      const node = params.data;

      // 检查点击的是否是操作图标
      if (params.event && params.event.target) {
        const target = params.event.target;
        const clickedText = target.style?.text || "";

        // 如果点击的是操作图标，执行相应操作
        if (clickedText) {
          switch (clickedText.trim()) {
            case "add":
              console.log(`图表 ${chartIndex + 1}: 执行新增操作`, node);
              if (node.typeId == 1 || node.typeId == 2 || node.typeId == 3) {
                addBtn(node.typeId, node.idDir);
              } else if (node.typeId == 4) {
                state.guandaoId = node.id;
                state.guanluName = node.name;
                guanlianZuankongFn();
              }
              break;
            case "del":
              console.log(`图表 ${chartIndex + 1}: 执行删除操作`, node);
              if ([1, 2, 3, 4].includes(node.typeId)) {
                delGuanluFn(node.id);
              } else if (node.typeId == 5) {
                delZuankongFn(node.id);
              }
              break;
            case "edit":
              console.log(`图表 ${chartIndex + 1}: 执行编辑操作`, node);
              if ([1, 2, 3, 4].includes(node.typeId)) {
                editBtn(node.id, node.typeId);
              } else if (node.typeId == 5) {
                state.guandaoId = node.parentId;
                state.guanluName =
                  params.treeAncestors[params.treeAncestors.length - 2].name;
                editGuanlianZuankongFn(node.id);
              }
              break;
            case "detail":
              console.log(`图表 ${chartIndex + 1}: 执行详情操作`, node);
              if ([1, 2, 3].includes(node.typeId)) {
                state.addTypeId = node.typeId;
                state.addIdDir = node.idDir;
                state.nodeIdFei = node.id;
                guanluDetailsFeiFn(node.id);
              } else if (node.typeId == 4) {
                state.guandaoId = node.id;
                state.guanluName = node.name;
                guanluDetailsFn(node.id);
              }
              break;
          }
          return; // 阻止其他行为
        }

        // 检查是否点击了小圆点（符号）
        const isClickOnSymbol =
          target?.shape?.symbolType === "circle" ||
          (target.style && target.style.symbolType === "circle");

        // 只有点击小圆点才允许展开收缩
        if (isClickOnSymbol) {
          const isExpanded = node.collapsed === false;
          if (isExpanded) {
            // 收起节点
            chart.dispatchAction({
              type: "treeCollapse",
              dataIndex: params.dataIndex,
            });
          } else {
            // 展开节点
            chart.dispatchAction({
              type: "treeExpand",
              dataIndex: params.dataIndex,
            });
          }

          console.log(
            `图表 ${chartIndex + 1}: 点击了小圆点，${
              isExpanded ? "收起" : "展开"
            }节点`
          );

          // 阻止事件冒泡
          params.event.event && params.event.event.stopPropagation();
        }
        // 如果点击的是标签但不是操作图标，什么也不做
      }
    }
  });

  chart.on("mouseover", function (params) {
    if (params.componentType === "series" && params.data) {
      const node = params.data;
      currentHoverNode = node.id;
      updateChartLabels(chart, processedData);
    }
  });

  chart.on("mouseout", function (params) {
    if (params.componentType === "series" && params.data) {
      currentHoverNode = null;
      updateChartLabels(chart, processedData);
    }
  });
}

// 更新图表标签
function updateChartLabels(chart, data) {
  chart.setOption({
    series: [
      {
        data: data,
      },
    ],
  });
}

// 获取树状图数据
function getList() {
  axios.post("/drainage/pipeline/tree", {}).then((res) => {
    // 假设res.data是一个数组，每个元素都是一个独立的树
    initCharts(res.data);
  });
}

// 管路类型变化
const guanluChange = (val) => {
  let num;
  if (val != 1) {
    num = Number(val) - 1;
    //汇入管路
    axios
      .post("/drainage/pipeline/pure-tree", {
        finalPipeTypeId: num,
      })
      .then((res) => {
        state.huiruSelectData = res.data;
      });
  }
};

const cascaderChange = (val) => {
  console.log(val, "cascaderChange");
};

//新增管路
const addBtn = (id, idDir) => {
  state.modalGuanluTitle = "新增管路";
  state.formGuanluData.huiruId = idDir;
  if (id == 1) {
    state.formGuanluData.pipeTypeId = 2;
    guanluChange(2);
  } else if (id == 2) {
    state.formGuanluData.pipeTypeId = 3;
    guanluChange(3);
  } else if (id == 3) {
    state.formGuanluData.pipeTypeId = 4;
    guanluChange(4);
  }
  state.addGuanluModal = true;
};

const editBtn = (id, typeId) => {
  axios.post("/drainage/pipeline/id", id).then((res) => {
    state.formGuanluData = res.data;
    state.formGuanluData.huiruId = res.data.idDir;
    state.modalGuanluTitle = "修改管路";
    state.addGuanluModal = true;
    guanluChange(typeId + 1);
  });
};

const cancelGuanluModal = () => {
  state.addGuanluModal = false;
  state.formGuanluData = {
    points: [{ location: "", pointId: "" }],
  };
};

const submitGuanluForm = () => {
  proxy.$refs.formGuanluRef.validate((valid) => {
    if (valid) {
      state.formGuanluData.atm = state.formGuanluData.atm
        ? Number(state.formGuanluData.atm)
        : null;
      state.formGuanluData.drainageStandardVolume = state.formGuanluData
        .drainageStandardVolume
        ? Number(state.formGuanluData.drainageStandardVolume)
        : null;
      state.formGuanluData.length = state.formGuanluData.length
        ? Number(state.formGuanluData.length)
        : null;
      if (state.modalGuanluTitle == "新增管路") {
        state.formGuanluData.joinPipeId =
          state.formGuanluData.huiruId[state.formGuanluData.huiruId.length - 1];
        delete state.formGuanluData.huiruId;
        axios
          .post("/drainage/pipeline/insert", state.formGuanluData)
          .then((res) => {
            cancelGuanluModal();
            ElMessage.success("新增成功");
            getList();
          });
      } else {
        axios
          .post("/drainage/pipeline/update", state.formGuanluData)
          .then((res) => {
            cancelGuanluModal();
            ElMessage.success("修改成功");
            getList();
          });
      }
    }
  });
};

const delGuanluFn = (id) => {
  ElMessageBox.confirm("是否确认删除?", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    axios.post("/drainage/pipeline/delete", [id]).then((res) => {
      ElMessage.success("删除成功");
      getList();
    });
  });
};

const delZuankongFn = (id) => {
  ElMessageBox.confirm("是否确认删除?", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    axios.post("/drainage/pipeline/drill/delete/drillId", [id]).then((res) => {
      ElMessage.success("删除成功");
      getList();
    });
  });
};

//关联监测点新增
const addJanceBtn = () => {
  state.addJanceModal = true;
  setTimeout(() => {
    state.addJanceModal = false;
  }, 300);
  state.formGuanluData.points.push({ location: "", pointId: "" });
};

const delJanceBtn = (index) => {
  state.formGuanluData.points.splice(index, 1);
};

//关联钻孔
const guanlianZuankongFn = () => {
  state.modalGlzkTitle = "关联钻孔";
  state.addGlzkModal = true;
  //钻场
  zuanchangList();
};

function zuanchangList() {
  axios.post("/drainage/drill-site/list", {}).then((res) => {
    state.zcSelectData = res.data.map((item) => {
      return {
        label: item.siteNameShow,
        value: item.id,
      };
    });
  });
}

const zcSelectChange = (val) => {
  state.formGlzkData.yxzkName = "";
  state.formGlzkData.drillId = null;
  axios
    .get("/drainage/pipeline/drill/select/optional/drill-list", {
      params: {
        drillSiteId: val,
        pipelineId: state.guandaoId,
      },
    })
    .then((res) => {
      state.zkSelectData = res.data.map((item) => {
        return {
          label: item.name,
          value: item.id,
        };
      });
    });

  let arr = [];
  axios
    .get("/drainage/pipeline/drill/select/drill-list", {
      params: {
        drillSiteId: val,
        pipelineId: state.guandaoId,
      },
    })
    .then((res) => {
      if (res.data.length > 0) {
        res.data.forEach((item) => {
          arr.push(item.name);
        });
        state.formGlzkData.yxzkName = arr.join(",");
      }
    });
};

const zkSelctChange = (id) => {
  axios
    .post("/drainage/drill/list", {
      id: id,
    })
    .then((res) => {
      state.zkObj = res.data[0];
    });
};

const editGuanlianZuankongFn = async (id) => {
  await axios
    .post("/drainage/pipeline/drill/select/list", {
      drillId: id,
      pipelineId: state.guandaoId,
    })
    .then((res) => {
      state.formGlzkData = res.data[0];
    });
  await zuanchangList();
  await zcSelectChange(state.formGlzkData.drillSiteId);
  await zkSelctChange(state.formGlzkData.drillId);
  state.modalGlzkTitle = "修改关联钻孔";
  state.addGlzkModal = true;
};

const cancelGlzkModal = () => {
  state.addGlzkModal = false;
  state.formGlzkData = {};
  state.formGlzkData.yxzkName = "";
  state.formGlzkData.drillId = null;
  state.formGlzkData.pipelineId = null;
  state.zkObj = {};
};

const submitGlzkForm = () => {
  state.formGlzkData.pipelineId = state.guandaoId;
  if (state.modalGlzkTitle == "关联钻孔") {
    axios
      .post("/drainage/pipeline/drill/insert", state.formGlzkData)
      .then((res) => {
        cancelGlzkModal();
        ElMessage.success("关联钻孔成功");
        getList();
      });
  } else {
    axios
      .post("/drainage/pipeline/drill/update", state.formGlzkData)
      .then((res) => {
        cancelGlzkModal();
        ElMessage.success("修改关联钻孔成功");
        getList();
      });
  }
};

// 管路详情-汇流管
const guanluDetailsFn = (id) => {
  axios.post("/drainage/pipeline/id", id).then((res) => {
    state.glDetailObj = res.data;
  });
  glxqTableData();
  state.guanluDetailsModal = true;
};

function glxqTableData() {
  axios
    .post("/drainage/pipeline/drill/page", {
      pageNum: state.glxqpageconfig.currentPage,
      pageSize: state.glxqpageconfig.pageSize,
      joinPipeId: state.guandaoId,
      drillCode: state.glSearchData.drillCode
        ? state.glSearchData.drillCode
        : null,
      queryStartTime: state.glSearchData.time ? state.glSearchData.time[0] : "",
      queryEndTime: state.glSearchData.time ? state.glSearchData.time[1] : "",
    })
    .then((res) => {
      state.glxqTableData = res.data.list;
      state.glxqpageconfig.total = res.data.total;
    });
}

const cancelGlDetailModal = () => {
  state.guanluDetailsModal = false;
};

const submitGlDetailForm = () => {
  state.guanluDetailsModal = false;
};

//查询-汇流管
const glDetailqueryFn = () => {
  glxqTableData();
};

const glDetailresetFn = () => {
  state.glSearchData = {};
  glxqTableData();
};

//管路详情分页-汇流管
const glxqCurrentPage = (currentPage) => {
  state.glxqpageconfig.currentPage = currentPage;
  glxqTableData();
};

const glxqSizePage = (pageSize) => {
  state.glxqpageconfig.pageSize = pageSize;
  glxqTableData();
};

// 管路详情-非汇流管
const guanluDetailsFeiFn = (id) => {
  axios.post("/drainage/pipeline/id", id).then((res) => {
    state.glDetailObjFei = res.data;
  });
  glxqTableDataFei(id);
  state.guanluDetailsModalFei = true;
};

function glxqTableDataFei(id) {
  axios
    .post("/drainage/pipeline/page", {
      joinPipeId: id,
      pageNum: state.glxqpageconfigFei.currentPage,
      pageSize: state.glxqpageconfigFei.pageSize,
      pipeName: state.glSearchDataFei.pipeName
        ? state.glSearchDataFei.pipeName
        : "",
      queryStartTime: state.glSearchDataFei.time
        ? state.glSearchDataFei.time[0]
        : "",
      queryEndTime: state.glSearchDataFei.time
        ? state.glSearchDataFei.time[1]
        : "",
    })
    .then((res) => {
      state.glxqTableDataFei = res.data.list;
      state.glxqpageconfigFei.total = res.data.total;
    });
}

const cancelGlDetailModalFei = () => {
  state.guanluDetailsModalFei = false;
};

const submitGlDetailFormFei = () => {
  state.guanluDetailsModalFei = false;
};

//查询-非汇流管
const glDetailqueryFeiFn = () => {
  glxqTableDataFei(state.nodeIdFei);
};

const glDetailresetFeiFn = () => {
  state.glSearchDataFei = {};
  glxqTableDataFei(state.nodeIdFei);
};

//管路详情分页-非汇流管
const glxqCurrentPageFei = (currentPage) => {
  state.glxqpageconfigFei.currentPage = currentPage;
  glxqTableDataFei(state.nodeIdFei);
};

const glxqSizePageFei = (pageSize) => {
  state.glxqpageconfigFei.pageSize = pageSize;
  glxqTableDataFei(state.nodeIdFei);
};

function getSelectData() {
  //监测点
  axios.post("/uni/sensor-point/list", {}).then((res) => {
    state.jiancedianSelectData = res.data.map((item) => {
      return {
        label: item.name,
        value: item.pointCode,
      };
    });
  });
  //管道类型
  axios
    .post("/gas-drainage/system/dict/data/type-batch", [
      "drill_pipe_pressure_type",
    ])
    .then((res) => {
      state.guandaoTypeSelectData = res.data.drill_pipe_pressure_type.map(
        (item) => {
          return {
            label: item.dictLabel,
            value: Number(item.dictValue),
          };
        }
      );
    });
}

// 在组件卸载时清理所有echarts实例
onUnmounted(() => {
  state.treeCharts.forEach((chart) => {
    if (chart) {
      chart.dispose();
    }
  });
});

onMounted(() => {
  getList();
  getSelectData();
  window.addEventListener("resize", () => {
    state.treeCharts.forEach((chart) => {
      if (chart) {
        chart.resize();
      }
    });
  });
});
</script>

<style lang="scss" scoped>
.pagestyle {
  position: relative;
  height: 100%;
}

.liuchengtu {
  height: calc(100% - 10px);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: -2px 0px 20px rgba(91, 109, 128, 0.08);
  margin-top: 10px;
  padding: 10px;

  .container {
    width: 100%;
    height: calc(100% - 30px);
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-content: flex-start;
    padding: 10px;

    .tree-chart-item {
      width: 100%;
      height: 100%;
      border: 1px solid #e0e0e0;
      border-radius: 4px;
      padding: 10px;
      background: #fff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

      @media (max-width: 1200px) {
        width: 100%;
      }
    }
  }
}

.topTitle {
  height: 32px;
  border-radius: 4px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 8px 12px 8px 12px;
  background-color: #d3e3f8;
  margin-bottom: 10px;
  .ble {
    font-weight: 700;
    color: rgba(68, 136, 255, 1);
  }
}

.tables {
  height: 100px;
  border-radius: 4px;
  background-color: #e1e8ec;
  margin-top: 15px;
  padding: 10px;
  .glzkall {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-content: flex-start;
    .glzkallTitie {
      width: 100%;
      .w80 {
        width: 100px;
      }
    }
    .t3 {
      font-weight: 700;
    }
  }
}

/* 管路详情 */
.zctp {
  width: 100%;
  border-radius: 4px;
  padding: 10px;
  background: rgba(91, 109, 128, 0.04);
  .zcptall {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-content: flex-start;
  }
  .zctp-lt {
    width: 100%;
    display: flex;
  }
  .zctp-ct {
    width: 2px;
    height: 32px;
    opacity: 1;
    background: rgba(204, 204, 204, 1);
  }
  .zctp-rt {
    width: 45%;
  }
  .t1 {
    color: rgba(62, 70, 79, 0.6);
  }
  .t2 {
    color: rgba(62, 70, 79, 1);
  }
  .t3 {
    font-weight: 700;
  }
}

.zcct {
  margin: 15px 0;
}

.zcbt {
  margin-top: 15px;
  .searchs {
    width: 100%;
    border-radius: 4px;
    padding: 5px 10px 0;
    background: rgba(91, 109, 128, 0.04);
    .el-col {
      margin: 0px 5px 0;
      height: 36px;
    }
  }
  .liebiao {
    margin-top: 10px;
    .liebiaoBottom {
      margin-top: 10px;
      height: 380px;
    }
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .liuchengtu .container .tree-chart-item {
    width: 100%;
    height: 100%;
  }

  .tables {
    height: auto;
    overflow-x: auto;
  }

  .glzkall {
    min-width: 800px;
  }
}
</style>